@charset "utf-8";

* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body,
h1,
h2,
h3,
p,
div,
ol,
ul,
input,
button {
	margin: 0;
	padding: 0
}

body {
	-webkit-text-size-adjust: 100%;
	color: #333333;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	font-family: PingFangSC-Regular, Helvetica, "Droid Sans", Arial, sans-serif;
}

ol,
ul {
	list-style: none
}

a {
	color: #333333;
	text-decoration: none;
}

input,
button,
textarea {
	border: 0;
	border-radius: 0;
	background: transparent;
	-webkit-appearance: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
}

button {
	outline: none
}

.view {
	position: absolute;
	width: 750px;
	height: 100%;
	overflow: hidden;
	left: 50%;
	margin-left: -375px;
	background-color: #50a2f8;
}

.page {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-size: cover;
	background-position: center;
background-color: #50a2f8;
	display: none;
}

.page_transition {
	transition: transform 0.45s ease;
	-ms-transition: transform 0.45s ease;
	-moz-transition: transform 0.45s ease;
	-webkit-transition: transform 0.45s ease;
}

.page_box {
	position: absolute;
	width: 100%;
	height: auto;
	left: 0;
	top: 0;
}

.page_box.fill {
	height: 100%;
}

.page_box.cover {}

.page_box.contain {}

.scrollview {
	position: absolute;
	width: 100%;
	height: 101%;
	left: 0;
	top: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.preload {
	display: none;
}

.preload img {
	width: 1px;
	height: 1px;
	display: none;
}

.music_btn {
	position: absolute;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	height: 50px;
	width: 50px;
    top: 30px;
    right: 240px;
}

.music_play {
	background-image: url(../img/music.png);
	animation: shunshi 2s 0s linear infinite;
}

.music_pause {
	background-image: url(../img/music_close.png);
}

.page_down {
	position: absolute;
	width: 4%;
	height: auto;
	left: 48%;
	bottom: 3%;
	opacity: 0;
}

.page_down {
	animation: fadeIn 0.5s 1.5s ease forwards, ufo 1.5s 0s ease infinite alternate;
}

.page_0 {
	display: block;
	background-color: #3aa6ff;
	background-image: url(../img/bg_1.jpg);
}

.loader_spin {
	position: absolute;
	width: 140px;
	height: auto;
	top: 50%;
	left: 0;
	right: 0;
	margin: -70px auto auto auto;
	animation: shunshi 2s 0s linear infinite;
	-webkit-animation: shunshi 2s 0s linear infinite;
}

.loader_text {
	position: absolute;
	width: 100%;
	height: 140px;
	left: 0%;
	top: 50%;
	text-align: center;
	line-height: 140px;
	font-size: 36px;
	color: white;
	margin-top: -70px;
}

.logo {
	position: absolute;
	left: 30px;
	top: 26px;
}

.icon_1 {
	position: absolute;
	left: 162px;
	top: 108px;
	animation: swing 1s 0s ease-in-out infinite alternate;
}

.tit,
.tit_1{
	position: absolute;
	width: 674px;
	height: auto;
    left: 35px;
    top: 162px;
	opacity: 0;
}

.tit{
	animation: duang_down 1s 1s ease-in forwards;
}

.tit_1{
	animation: duang_top 1s 0s ease-in forwards;
}

.list {
	position: absolute;
	left: 42px;
	width: 661px;
	height: 151px;
}

.list_1 {
	top: 888px;
}

.list_2 {
	top: 1072px;
}

.list_3 {
	top: 1255px;
}

.list_4 {
	top: 1438px;
}

.list img:last-child {
	position: absolute;
	top: 56px;
	right: 42px;
}

.icon_2 {
	position: absolute;
	top: 845px;
	right: 84px;
	transform-origin: right bottom;
	/* animation: boom_shakalaka 2s 0s linear infinite alternate; */
}


.icon_3 {
	position: absolute;
top: 1135px;
    right: 52px;
	transform-origin: top;
	animation: btn 1s 0s ease-in-out infinite alternate;
}

.icon_4 {
	position: absolute;
	top: 1233px;
	right: 28px;
	animation: boom_shakalaka 1.6s 0s linear infinite alternate;
}

.btn_3 {
	position: absolute;
	width: 318px;
	height: 72px;
	top: 1771px;
	left: 38px;
}

.page_1,
.page_7,
.page_8 {
	background-image: url(../img/bg_1.jpg);
}

.p_1_14 {
	position: absolute;
	width: 311px;
	height: auto;
	left: -54px;
	top: 765px;
	opacity: 0;
	animation: leftin 1s 1s ease-in-out forwards;
}

.p_1_13 {
	position: absolute;
	width: 31px;
	height: auto;
	left: 190px;
	top: 419px;
}

.p_1_12 {
	position: absolute;
	width: 459px;
	height: auto;
	left: 156px;
	top: 1275px;
	opacity: 0;
	animation: bottomin 1s 2s ease-in-out forwards;
	    overflow: hidden;
	    z-index: 111;
}

.p_1_11 {
	position: absolute;
	width: 751px;
	height: auto;
	left: 52px;
	top: 133px;
}

.p_1_10 {
	position: absolute;
	width: 41px;
	height: auto;
	left: 373px;
	top: 348px;
	opacity: 0;
	animation: fadeIn 1s 2s ease-in-out forwards, shine 1s 3s ease-in-out infinite alternate;
}

.p_1_9 {
	position: absolute;
	width: 36px;
	height: auto;
	left: 517px;
	top: 329px;
	opacity: 0;
	transform-origin: top;
	animation: fadeIn 1s 0.4s ease-in-out forwards, swing 1.2s -1s ease-in-out infinite alternate;
}

.p_1_8 {
	position: absolute;
	width: 32px;
	height: auto;
	left: 453px;
	top: 329px;
	opacity: 0;
	transform-origin: top;
	animation: fadeIn 1s 0.7s ease-in-out forwards, swing 1.4s -1s ease-in-out infinite alternate;
}

.p_1_7 {
	position: absolute;
	width: 40px;
	height: auto;
	left: 579px;
	top: 329px;
	opacity: 0;
	transform-origin: top;
	animation: fadeIn 1s 0s ease-in-out forwards, swing 1s -1s ease-in-out infinite alternate;
}

.p_1_6 {
	position: absolute;
	width: 149px;
	height: auto;
	left: 216px;
	top: 375px;
	opacity: 0;
	transform-origin: bottom;
	animation: sbin 1s 1.5s ease-in-out forwards;
}

.p_1_5 {
	position: absolute;
	width: 645px;
	height: auto;
	left: 113px;
	top: 456px;
	opacity: 0;
	transform-origin: right;
	animation: sbin 1s 0s ease-in-out forwards;
}

.p_1_4 {
	position: absolute;
	width: 222px;
	height: auto;
	left: -40px;
	top: 376px;
	opacity: 0;
	animation: leftin 1s 1.5s ease-in-out forwards;
}

.p_1_3 {
	position: absolute;
	width: 43px;
	height: auto;
	left: 662px;
	top: 275px;
	opacity: 0;
	animation: fadeIn 1s 2s ease-in-out forwards, shine 1.2s 3s ease-in-out infinite alternate;
}

.p_1_2 {
	position: absolute;
	width: 77px;
	height: auto;
	left: 33px;
	top: 112px;
	opacity: 0;
	animation: fadeIn 1s 2s ease-in-out forwards, boom_shakalaka 1.2s 3s ease-in-out infinite alternate;
}

.p_1_1 {
	position: absolute;
	width: 224px;
	height: auto;
	left: 583px;
	top: 1036px;
	opacity: 0;
	animation: rightin 1s 1s ease-in-out forwards;
}

.p_1_0 {
	position: absolute;
	width: 218px;
	height: auto;
	left: 61px;
	top: 41px;
}

.page_2,
.page_3,
.page_4,
.page_5,
.page_6 {
	background-image: url(../img/bg_2.jpg);
}

.p_2_9 {
	position: absolute;
	width: 644px;
	height: auto;
	left: 53px;
	top: 121px;
}

.p_2_8 {
	position: absolute;
	width: 415px;
	height: auto;
	left: 241px;
	top: 430px;
}

.p_2_7 {
	position: absolute;
	width: 250px;
	height: auto;
	left: 126px;
	top: 458px;
	opacity: 0;
	transform-origin: right bottom;
	animation: sbin 1s 2.5s ease-in-out forwards;
}

.p_2_6 {
	position: absolute;
	width: 574px;
	height: auto;
	left: 88px;
	top: 228px;
	opacity: 0;
	animation: fadeIn 1s 0s ease-in-out forwards;
}

.p_2_5 {
	position: absolute;
	width: 459px;
	height: auto;
	left: 176px;
	top: 275px;
	opacity: 0;
	transform-origin: left;
	animation: sbin 1s 1s ease-in-out forwards;
}

.p_2_4 {
	position: absolute;
	width: 55px;
	height: auto;
	left: 107px;
	top: 282px;
	opacity: 0;
	animation: leftin 1s 0.5s ease-in-out forwards;
}

.page_rgba {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	background-color: rgba(0, 0, 0, 0.6);
}

.page_rgba img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.alt_2 img:first-child,.alt_1 img:first-child {
	animation: fadeOut 1s 1s ease-in-out forwards;
}
.alt_2 img:nth-child(2),.alt_1 img:nth-child(2) {
	opacity: 0;
	animation: fadeIn 1s 1s ease-in-out forwards;
}
.alt_2 img:nth-child(3),.alt_1 img:nth-child(3) {
	opacity: 0;
	animation: fadeIn 1s 1s ease-in-out forwards;
}


.p_2_box,.p_3_box,.p_4_box,.p_5_box,.p_6_box {
	position: absolute;
	left: 0;
	right: 0;
	top: 1166px;
	margin: auto;
}
.p_3_box{
	top: 1156px;
}
.p_4_box{
	
}


.anws_box {
	width: 511px;
}

.anws_list {
	position: relative;
	width: 100%;
	padding: 10px 36px;
	margin-bottom: 10px;
	box-sizing: border-box;
	background-color: #dbeeff;
}

.anws_list img:last-child {
	position: absolute;
	right: 10px;
	bottom: 0;
	opacity: 0;
	/* top: 50%;
	transform: translateY(-50%); */
}

.anws_list.active {
	background-color: #ffc5bd;
}

.anws_list.active img:last-child {
	opacity: 1;
}
.p_2_0 {
	position: absolute;
	width: 218px;
	height: auto;
	left: 50px;
	top: 38px;
}

.p_3_7 {
	position: absolute;
	width: 644px;
	height: auto;
	left: 53px;
	top: 121px;
}

.p_3_6 {
	position: absolute;
	width: 252px;
	height: auto;
	left: 387px;
	top: 454px;
	opacity: 0;
	transform-origin: bottom;
	animation: sbin 1s 2s ease-in-out forwards;
}

.p_3_5 {
	position: absolute;
	width: 580px;
	height: auto;
	left: 87px;
	top: 232px;
	opacity: 0;
	animation: sbin 1s 0s ease-in-out forwards;
}

.p_3_4 {
	position: absolute;
	width: 282px;
	height: auto;
	left: 141px;
	top: 1233px;
}

.p_3_3 {
	position: absolute;
	width: 283px;
	height: auto;
	left: 141px;
	top: 1177px;
}

.p_3_2 {
	position: absolute;
	width: 222px;
	height: auto;
	left: 141px;
	top: 1292px;
}

.p_3_1 {
	position: absolute;
	width: 218px;
	height: auto;
	left: 50px;
	top: 38px;
}

.p_3_0 {
	position: absolute;
	width: 38px;
	height: auto;
	left: 206px;
	top: 799px;
}

.p_4_4 {
	position: absolute;
	width: 644px;
	height: auto;
	left: 53px;
	top: 121px;
}

.p_4_3 {
	position: absolute;
	width: 586px;
	height: auto;
	left: 82px;
	top: 234px;
	opacity: 0;
	animation: sbin 1s 0s ease-in-out forwards;
}

.p_4_2 {
	position: absolute;
	width: 152px;
	height: auto;
	left: 157px;
	top: 1195px;
}

.p_4_1 {
	position: absolute;
	width: 185px;
	height: auto;
	left: 157px;
	top: 1268px;
}

.p_4_0 {
	position: absolute;
	width: 218px;
	height: auto;
	left: 50px;
	top: 38px;
}


.p_5_5 {
	position: absolute;
	width: 644px;
	height: auto;
	left: 53px;
	top: 121px;
}

.p_5_4 {
	position: absolute;
	width: 294px;
	height: auto;
	left: 261px;
	top: 364px;
	opacity: 0;
	transform-origin: bottom;
	animation: sbin 1s 2s ease-in-out forwards;
}

.p_5_3 {
	position: absolute;
	width: 414px;
	height: auto;
	left: 160px;
	top: 242px;
	opacity: 0;
	animation: sbin 1s 0s ease-in-out forwards;
}

.p_5_2 {
	position: absolute;
	width: 151px;
	height: auto;
	left: 157px;
	top: 1194px;
}

.p_5_1 {
	position: absolute;
	width: 184px;
	height: auto;
	left: 157px;
	top: 1267px;
}

.p_5_0 {
	position: absolute;
	width: 218px;
	height: auto;
	left: 50px;
	top: 38px;
}

.p_6_7 {
	position: absolute;
	width: 644px;
	height: auto;
	left: 53px;
	top: 121px;
}

.p_6_6 {
	position: absolute;
	width: 214px;
	height: auto;
	left: 114px;
	top: 379px;
	opacity: 0;
	animation: sbin 1s 2s ease-in-out forwards;
}

.p_6_5 {
	position: absolute;
	width: 234px;
	height: auto;
	left: 430px;
	top: 368px;
	opacity: 0;
	animation: sbin 1s 3.5s ease-in-out forwards;
}

.p_6_4 {
	position: absolute;
	width: 558px;
	height: auto;
	left: 91px;
	top: 244px;
	opacity: 0;
	animation: sbin 1s 0s ease-in-out forwards;
}

.p_6_3 {
	position: absolute;
	width: 511px;
	height: auto;
	left: 120px;
	top: 1183px;
}

.p_6_2 {
	position: absolute;
	width: 152px;
	height: auto;
	left: 157px;
	top: 1195px;
}

.p_6_1 {
	position: absolute;
	width: 185px;
	height: auto;
	left: 157px;
	top: 1268px;
}

.p_6_0 {
	position: absolute;
	width: 218px;
	height: auto;
	left: 50px;
	top: 38px;
}


.p_7_12 {
	position: absolute;
	width: 677px;
	height: auto;
	left: 37px;
	top: 136px;
}

.p_7_11 {
	position: absolute;
	width: 331px;
	height: auto;
	left: 210px;
	top: 359px;
}

.p_7_10 {
	position: absolute;
	width: 563px;
	height: auto;
	left: 94px;
	top: 552px;
}

.p_7_9 {
	position: absolute;
	width: 20px;
	height: auto;
	left: 494px;
	top: 657px;
}

.p_7_8 {
	position: absolute;
	width: 20px;
	height: auto;
	left: 216px;
	top: 657px;
}

.p_7_7 {
	position: absolute;
	width: 192px;
	height: auto;
	left: 279px;
	top: 451px;
	color: #f82525;
	font-size: 40px;
	text-align: center;
}
.p_7_7 span{
	font-weight: bold;
	font-size: 72px;
}

.p_7_8{
	color: #f82525;
	font-weight: bold;
	font-size: 32px;
}
.p_7_9{
	color: #969393;
	font-weight: bold;
	font-size: 32px;
}
.p_7_6 {
	position: absolute;
	width: 548px;
	height: auto;
	left: 103px;
	top: 914px;
}

.p_7_5 {
	position: absolute;
	width: 118px;
	height: auto;
	left: 317px;
	top: 214px;
}

.p_7_4 {
	position: absolute;
	width: 218px;
	height: auto;
	left: 52px;
	top: 41px;
}

.p_7_3 {
	position: absolute;
	width: 243px;
	height: auto;
	left: 102px;
	top: 780px;
}

.p_7_2 {
	position: absolute;
	width: 243px;
	height: auto;
	left: 408px;
	top: 780px;
}

.p_7_1 {
	position: absolute;
	width: 41px;
	height: auto;
	left: 215px;
	top: 492px;
}

.p_7_0 {
	position: absolute;
	width: 27px;
	height: auto;
	left: 468px;
	top: 431px;
}


.p_8_3 {
	position: absolute;
	width: 677px;
	height: auto;
	left: 37px;
	top: 136px;
}

.p_8_2 {
	position: absolute;
	width: 332px;
	height: auto;
	left: 209px;
	top: 359px;
}

.p_8_1 {
	position: absolute;
	width: 548px;
	height: auto;
	left: 103px;
	top: 914px;
}

.p_8_0 {
	position: absolute;
	width: 110px;
	height: auto;
	left: 321px;
	top: 215px;
}

.d_1{
	    top: 479px !important;
}
.d_2{
	    top: 750px !important;
}
.d_3{
	    top: 487px !important;
}
.d_4{
	    top: 480px !important;
}
.d_5{
	    top: 491px !important;
}
.new_1{
		position: absolute;
	width: 81px;
	height: auto;
	left: 606px;
	top: 376px;
	animation: boom_shakalaka 1.6s 0s linear infinite alternate;
}
.new_2{
		position: absolute;
	width: 117px;
	height: auto;
	left: 614px;
	top: 683px;
		opacity: 0;
	animation: fadeIn 0.5s 0.5s ease forwards, ufo 1.5s 0s ease infinite alternate;
}
.new_3{
		position: absolute;
	width: 112px;
	height: auto;
	left: -20px;
	top: 363px;	
	opacity: 0;
	animation: fadeIn 0.5s 0.5s ease forwards, ufo 1.5s 0s ease infinite alternate;
}
.new_6{
		position: absolute;
	width: 695px;
	height: auto;
    left: 25px;
    top: 318px;
	    opacity: 0;
       animation: lightSpeedInRight 1s 1s ease-in-out forwards,fadeIn1 2s 1s linear infinite;
}

@keyframes lightSpeedInRight {
	0% {
		-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
		transform: translate3d(100%, 0, 0) skewX(-30deg);
		opacity: 0
	}

	60% {
		-webkit-transform: skewX(20deg);
		transform: skewX(20deg);
		opacity: 1
	}

	80% {
		-webkit-transform: skewX(-5deg);
		transform: skewX(-5deg);
		opacity: 1
	}

	to {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		opacity: 1
	}
}

@keyframes lightSpeedInLeft {
	0% {
		-webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
		transform: translate3d(-100%, 0, 0) skewX(30deg);
		opacity: 0
	}

	60% {
		-webkit-transform: skewX(-20deg);
		transform: skewX(-20deg);
		opacity: 1
	}

	80% {
		-webkit-transform: skewX(5deg);
		transform: skewX(5deg);
		opacity: 1
	}

	to {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		opacity: 1
	}
}
@-webkit-keyframes fadeIn1 {
	0% {
		opacity: 0.4
	}

	50% {
		opacity: 1
	}

	100% {
		opacity: 0.4
	}
}

@keyframes fadeIn1 {
	0% {
		opacity: 0.4
	}

	50% {
		opacity: 1
	}

	100% {
		opacity: 0.4
	}
}
.bot_bu{
	position: absolute;
	    top: 1691px;
	    left: 38px;
	       animation: bottomin 1s 2s ease-in-out forwards, btn 1s -1s ease-in-out infinite alternate;
	
	
}
.bottom_eye{
	position: absolute;
	    top: 1797px;
	    left: 72px;
	    animation: boom_shakalaka 1.6s 0s linear infinite alternate;
	
}